<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src="../js/jquery-1.4.2.js"></script>
    <script>
        $(function(){
            $("input[value='添加']").click(function(){
               var tr = $("<tr></tr>>");
               var nametd =$("<td></td>>");
               var agetd =$("<td></td>>");
               var saltd =$("<td></td>>");
               var depttd =$("<td></td>>");
               var deltd =$("<td><input type='button'value='删除'></input></td>");
               //给删除按钮添加事件
                deltd.children().click(function () {
                    $(this).parent().parent().remove();  //this 代表当前对象(删除按钮)  将按钮的爸爸的爸爸删除
                });
               //给td添加显示文本
                nametd.text($("input:eq(0)").val());
                agetd.text($("input:eq(1)").val());
                saltd.text($("input:eq(2)").val());
                depttd.text($("input:eq(3)").val());
                //把td添加到tr里面
                tr.append(nametd);
                tr.append(agetd);
                tr.append(saltd);
                tr.append(depttd);
                tr.append(deltd);
                //把tr添加到table 里面
                $("table").append(tr);
            });
        });
    </script>
</head>
<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <input type="text" placeholder="工资">
    <input type="text" placeholder="部门">
    <input type="button"value="添加">
<table>
    <caption>员工表</caption>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>工资</th>
        <th>部门</th>
        <th>操作</th>
    </tr>

</table>
</body>
</html>